import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/candlestick/lit-candlestick.ts"
import {CandlestickProps} from "../../../echarts/candlestick/lit-candlestick.ts";

const meta: Meta<CandlestickProps> = {
    title: 'Echarts/LitCandlestick',
    tags: ['autodocs'],
    render: (args: CandlestickProps): TemplateResult => {
        return html`<lit-candlestick 
            .chartId=${args.chartId}
            .width=${args.width}
            .height=${args.height}
            .xAxisData=${args.xAxisData}
            .seriesData=${args.seriesData}
        />`;
    },
    argTypes: {
        chartId: { control: 'text' },
        width: { control: 'text' },
        height: { control: 'text' },
        xAxisData: { control: 'object' },
        seriesData: { control: 'object' },
    },
};

export default meta;
type Story = StoryObj<CandlestickProps>;

export const BasicCandlestick: Story = {
    args: {
        chartId: 'basic-candlestick-chart',
        width: '1200px',
        height: '600px',
        xAxisData: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'],
        seriesData: [
            [20, 34, 10, 38],
            [40, 35, 30, 50],
            [31, 38, 33, 44],
            [38, 15, 5, 42]
        ]
    }
};